////
// Bevel effect
///

$bevel-base-color: rgba(#333, .5) !default;
$bevel-size: 5px !default;
$bevel-contrast: 8% !default;
$bevel-border-width: 1px !default;
$bevel-blur: 0 !default;

@mixin bevel
{
    @include bevel-border;
    @include bevel-shadow;
}

@mixin bevel-border(
    $base-color: $bevel-base-color,
    $border-width: $bevel-border-width,
    $contrast: $bevel-contrast
)
{
    border: $border-width solid $base-color;
    border-top-color: lighten($base-color, $contrast);
    border-bottom-color: darken($base-color, $contrast);
}

// @todo: $direction

@mixin bevel-shadow(
    $size: $bevel-size,
    $blur: $bevel-blur
)
{
    @include box-shadow(
        inset 0 0 (1px + $blur) rgba(#000, .8),
        inset 0 2px $blur rgba(#fff, .5),
        inset 0 (-$size) $blur rgba(#000, .6),
        inset 0 (-$size - 1px - $blur) $blur rgba(#fff, .3)
    );
}